/**
 * 使用 lazy() 实现异步组件
 *
 *    语法：
 *      const LazyCom = lazy(() => import('xx组件'))
 *
 *    作用：
 *      做代码分割，会将该组件单独生成一份 JS 资源，等待组件要渲染的时候才去加载，加载完再渲染出来。实现性能优化，减少白屏时间。
 *
 *    注意：
 *      lazy 必须要结合 Suspense 组件来使用
 */

import { Component, lazy, Suspense } from "react";
import classNames from "classnames";

// import Home from "./components/Home";
// import About from "./components/About";
// import Contact from "./components/Contact";

import "./global.css";

const Home = lazy(() => import("./components/Home.tsx"));
const About = lazy(() => import("./components/About.tsx"));
const Contact = lazy(() => import("./components/Contact.tsx"));

interface IProps {}

interface IState {
  cur: string;
}

export default class App extends Component<IProps, IState> {
  state: Readonly<IState> = {
    cur: "Home",
  };

  change = (name: string) => {
    this.setState({
      cur: name,
    });
  };

  render() {
    const { cur } = this.state;

    return (
      <div>
        <h1>Tabs 选项卡切换</h1>

        <button
          // className={cur === "Home" ? "button active" : "button"}
          className={classNames("button", { active: cur === "Home" })}
          onClick={() => this.change("Home")}
        >
          Home
        </button>
        <button
          // className={cur === "About" ? "button active" : "button"}
          className={classNames("button", { active: cur === "About" })}
          onClick={() => this.change("About")}
        >
          About
        </button>
        <button
          // className={cur === "Contact" ? "button active" : "button"}
          className={classNames("button", { active: cur === "Contact" })}
          onClick={() => this.change("Contact")}
        >
          Contact
        </button>

        <hr />
        <Suspense fallback={<div>加载中...</div>}>
          {cur === "Home" && <Home />}
          {cur === "About" && <About />}
          {cur === "Contact" && <Contact />}
        </Suspense>
      </div>
    );
  }
}
